<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>客户管理</title>
    <!-- 引入css样式文件 -->
    <!-- Bootstrap Core CSS -->
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <!-- MetisMenu CSS -->
    <link th:href="@{/css/metisMenu.min.css}" rel="stylesheet"/>
    <!-- DataTables CSS -->
    <link th:href="@{/css/dataTables.bootstrap.css}" rel="stylesheet"/>
    <!-- Custom CSS -->
    <link th:href="@{/css/sb-admin-2.css}" rel="stylesheet"/>
    <!-- Custom Fonts -->
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/ css/boot-crm.css}" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="wrapper">
    <div th:insert="~{topbar :: topbar}" ></div>
    <!-- 字典列表查询部分  start-->
    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-14">
                <h1 class="page-header">字典管理</h1>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->
        <div class="panel panel-default">
            <div class="panel-body">
                <form class="form-inline" method="get"
                      action="/base-dict/list">
                    <div class="form-group">
                        <label>类别代码</label>
                        <input width="100" type="text" class="form-control" id="customerName1"
                               name="dictTypeCode"/>
                    </div>

                    <div class="form-group">
                        <label>类别名称</label>
                        <input width="100" type="text" class="form-control" id="customerName2"
                               name="dictTypeName"/>
                    </div>
                    <div class="form-group">
                        <label >项目名称</label>
                        <input width="100" type="text" class="form-control" id="customerName3"
                               name="dictItemName"/>
                    </div>
                    <div class="form-group">
                        <label >排序字段</label>
                        <input width="100" type="text" class="form-control" id="customerName4"
                               name="dictSort"/>
                    </div>
                    <button type="submit" class="btn btn-primary">查询</button>
                </form>
            </div>
        </div>
        <a href="#" class="btn btn-primary" data-toggle="modal"
           data-target="#newCustomerDialog" onclick="clearCustomer()">新建</a>
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">数据字段列表</div>
                    <!-- /.panel-heading -->
                    <table class="table table-bordered table-striped">
                        <thead>
                        <tr>
                            <th>编号</th>
                            <th>类别代码</th>
                            <th>类别名称</th>
                            <th>项目名称</th>
                            <th>排序字段</th>
                            <th>是否停用</th>
                            <th>备注</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <div th:each="baseDict:${baseDicts}">
                            <tr>
                                <td th:text="${baseDict.dictId}"></td>
                                <td th:text="${baseDict.dictTypeCode}"></td>
                                <td th:text="${baseDict.dictTypeName}"></td>
                                <td th:text="${baseDict.dictItemName}"></td>
                                <td th:text="${baseDict.dictSort}"></td>
                                <td th:text="${baseDict.dictEnable}"></td>
                                <td th:text="${baseDict.dictMemo}"></td>
                                <td>
                                    <a href="#" class="btn btn-primary btn-xs" data-toggle="modal"
                                       data-target="#customerEditDialog"
                                       th:onclick="editCustomer([[${baseDict.dictId}]])">修改</a>
                                    <a href="#" class="btn btn-danger btn-xs" th:onclick="deleteCustomer([[${baseDict.dictId}]])">删除</a>
                                </td>
                            </tr>
                        </div>
                        </tbody>
                    </table>
                    <div class="col-md-12 text-right">
                        <ujn:page url="${pageContext.request.contextPath }/customer/list.action"/>
                    </div>
                    <!-- /.panel-body -->
                </div>
                <!-- /.panel -->
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <nav aria-label="Page navigation">
            <ul class="pagination" th:if="${pre!=null}">
                <li>
                    <a th:href="@{/base-dict/list(dictTypeCode=${dictTypeCode},dictTypeName=${dictTypeName},dictItemName=${dictItemName},dictSort=${dictSort},currentPage=1)}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li>
                    <a th:href="@{/base-dict/list(dictTypeCode=${dictTypeCode},dictTypeName=${dictTypeName},dictItemName=${dictItemName},dictSort=${dictSort},currentPage=${pre})}" aria-label="Previous">
                        <span aria-hidden="true">&lt;</span>
                    </a>
                </li>

                <li th:class="${num==current?'active':''}" th:each="num, numStat : ${#numbers.sequence(start,total)}"><a th:href="@{/base-dict/list(dictTypeCode=${dictTypeCode},dictTypeName=${dictTypeName},dictItemName=${dictItemName},dictSort=${dictSort},currentPage=${num})}" th:text="${num}" ></a></li>
                <li>
                    <a th:href="@{/base-dict/list(dictTypeCode=${dictTypeCode},dictTypeName=${dictTypeName},dictItemName=${dictItemName},dictSort=${dictSort},currentPage=${next})}" aria-label="Previous">
                        <span aria-hidden="true">&gt;</span>
                    </a>
                </li>
                <li>
                    <a th:href="@{/base-dict/list(dictTypeCode=${dictTypeCode},dictTypeName=${dictTypeName},dictItemName=${dictItemName},dictSort=${dictSort},currentPage=${final})}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>

    </div>
    <!-- 客户列表查询部分  end-->
</div>
<!-- 创建客户模态框 -->
<div class="modal fade" id="newCustomerDialog" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel1">新建字典信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="new_customer_form1">
<!--                    <div class="form-group">-->
<!--                        <label class="col-sm-2 control-label">-->
<!--                            编号-->
<!--                        </label>-->
<!--                        <div class="col-sm-10">-->
<!--                            <input type="text" class="form-control" id="new_1" placeholder="编号"-->
<!--                                   name="dictId"/>-->
<!--                        </div>-->
<!--                    </div>-->


                        <div class="form-group">
                            <label class="col-sm-2 control-label">类别代码</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="new_2" placeholder="类别代码"
                                       name="dictTypeCode"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">类别名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="new_3" placeholder="类别名称"
                                       name="dictTypeName"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">项目名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="new_4" placeholder="项目名称"
                                       name="dictItemName"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-2 control-label">项目代码</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="new_5" placeholder="项目代码"
                                       name="dictItemCode"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">排序字段</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="new_6" placeholder="排序字段"
                                       name="dictSort"/>
                            </div>
                        </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">是否停用</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="new_7" placeholder="是否停用"
                                   name="dictEnable"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">备注</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="new_8" placeholder="备注"
                                   name="dictMemo"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="createCustomer()">创建数据字典</button>
            </div>
        </div>
    </div>
</div>
<!-- 修改客户模态框 -->
<div class="modal fade" id="customerEditDialog" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">修改字典信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="new_customer_form">
                    <div class="form-group">
                        <div class="col-sm-10">
                            <input  type="hidden" class="form-control" id="edit_1" placeholder=" 编号"
                                   name="dictId"/>
                        </div>
                    </div>


                    <div class="form-group">
                        <label class="col-sm-2 control-label">类别代码</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="edit_2" placeholder="类别代码"
                                   name="dictTypeCode"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">类别名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="edit_3" placeholder="类别名称"
                                   name="dictTypeName"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">项目名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="edit_4" placeholder="项目名称"
                                   name="dictItemName"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">项目代码</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="edit_5" placeholder="项目代码"
                                   name="dictItemCode"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">排序字段</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="edit_6" placeholder="排序字段"
                                   name="dictSort"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">是否停用</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="edit_7" placeholder="是否停用"
                                   name="dictEnable"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">备注</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="edit_8" placeholder="备注"
                                   name="dictMemo"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="updateCustomer()">保存修改</button>
            </div>
        </div>
    </div>
</div>
<!-- 引入js文件 -->
<!-- jQuery -->
<script th:src="@{/js/jquery-1.11.3.min.js}"></script>
<!-- Bootstrap Core JavaScript -->
<script th:src="@{/js/bootstrap.min.js}"></script>
<!-- Metis Menu Plugin JavaScript -->
<script th:src="@{/js/metisMenu.min.js}"></script>
<!-- DataTables JavaScript -->
<script th:src="@{/js/jquery.dataTables.min.js}"></script>
<script th:src="@{/js/dataTables.bootstrap.min.js}"></script>
<!-- Custom Theme JavaScript -->
<script th:src="@{/js/sb-admin-2.js}"></script>
<!-- 编写js代码 -->
<script type="text/javascript">
    //清空新建客户窗口中的数据
    function clearCustomer() {
        $("#new_1").val("");
        $("#new_2").val("")
        $("#new_3").val("")
        $("#new_4").val("")
        $("#new_5").val("");
        $("#new_6").val("");
        $("#new_7").val("");
        $("#new_8").val("");
    }

    // 创建客户
    function createCustomer() {
        $.post("/base-dict/create",
            $("#new_customer_form1").serialize(), function (data) {
                if (data == "OK") {
                    alert("数据字典创建成功！");
                    window.location.reload();
                } else {
                    alert("数据字典创建失败！");
                    window.location.reload();
                }
            });
    }

    // 通过id获取修改的客户信息
    function editCustomer(id) {
        $.ajax({
            type: "get",

            url: "/base-dict/getDictById",

            data: {"id": id},
            success: function (data) {
                $("#edit_1").val(  data.dictId);
                $("#edit_2").val( data.dictTypeCode);
                $("#edit_3").val( data.dictTypeName)
                $("#edit_4").val( data.dictItemName)
                $("#edit_5").val(data.dictItemCode)
                $("#edit_6").val(data.dictSort);
                $("#edit_7").val(data.dictEnable);
                $("#edit_8").val( data.dictMemo);


            }
        });
    }

    // 执行修改客户操作
    function updateCustomer() {
        $.post("/base-dict/update", $("#new_customer_form").serialize(), function (data) {
            if (data == "OK") {
                alert("数据字典信息更新成功！");
                window.location.reload();
            } else {
                alert("数据字典信息更新失败！");
                window.location.reload();
            }
        });
    }

    // 删除客户
    function deleteCustomer(id) {
        if (confirm('确实要删除该数据字典吗?')) {
            $.post("/base-dict/delete", {"id": id},
                function (data) {
                    if (data == "OK") {
                        alert("数据字典删除成功！");
                        window.location.reload();
                    } else {
                        alert("删除数据字典失败！");
                        window.location.reload();
                    }
                });
        }
    }
</script>
</body>
</html>
